<template>
  <view class="m-bbb">
    <view
      class="item dev-box label1"
      v-for="(item, index) in positions"
      :key="index"
     @click="onClick(item)"
	  >
     <view class="mark" >{{ item.bangbType }}</view>
		
	 <image v-if="item.listing=='1'" @click.stop="edit(item.id)" class="editBtn" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/edit.png">
  <!--   <view class="mark" >{{ item.bangbType }}</view> -->

      <view class="title space-between">
        <view class="left">
         标题 ：  <text class="title-name">{{ item.title }}</text>
        </view>
        <text class="right">{{ item.money + '星币' }}</text>
		
			  <image v-if="item.listing=='1'  && item.payState==1"  mode="aspectFill" style="width: 130upx;height: 130upx; position: fixed; position:relative; position:absolute;	 margin-left: 400upx;" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/yxj.png"></image>
			  <image v-if="item.state==5 && item.payState==1"  mode="aspectFill" style="width: 130upx;height: 130upx; position: fixed; position:relative; position:absolute;	 margin-left: 500upx;" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/yiwc.png"></image>
			
	  </view>
	
      <view>
        状态：
        <text
          :class="{
            'text-error': item.urgent == '1',
          }"
          >{{ item.urgent == '0' ? '正常' : '加急' }}</text
        >
      </view>
      <view class="dateTime">
        <uni-icons type="calendar" style="margin-right: 15upx"></uni-icons>
        发布时间：{{ formatCreateTime(item.createTime) }}
      </view>
      <view class="dateTime">
        <uni-icons type="calendar" style="margin-right: 15upx"></uni-icons>
        截止时间： {{ formatCreateTime(item.endTime) }}
      </view>
      <view class="label">
        <text class="title-parttime">{{ item.mode }}</text>
      </view>
	  
	  <view class="labelBb1">
	
		  <view v-if="item.listing=='0'  && item.payState==1 && item.state==0">   <button @click.stop="bbCick(item.id,0)"  type="default" size="mini" class="title-parttime1">下架</button></view>
			 
			  <view v-else-if="item.listing=='1'  && item.payState==1 && item.state==0"> <button  class="title-parttime2" type="default"  @click.stop="bbCick(item.id,1)"  size="mini">上架</button>
			   </view>
			   <view v-else-if=" item.payState==1 && item.state==2"> <button  class="title-parttime2" type="default"  @click.stop="servicecomplete(item.id,2)"  size="mini">服务完成</button>
			    </view>
			   <view v-else-if="item.payState==0"> <button class="title-parttime2"   @click.stop="bbOPay(item.id,item.money)"  size="mini">点击支付佣金可上架</button>
				</view>
	  </view>
	  
    </view>
	<uni-popup ref="popup" type="center">
	  <view
	    style="
	      background-color: white;
	      margin: 0 auto;
	      padding: 40upx;
	      border-radius: 15upx;
	    "
	  >
	  <view>请选择支付方式:</view>
	    <radio-group name="payType" @change ="payRadioChange" v-model="payType" >
	    	<label class="radio" ><radio style="transform:scale(0.7)" value='0' />余额支付</label>
	    	<label class="radio"><radio style="transform:scale(0.7)" value='1' />微信支付</label>
	    </radio-group>
	    <button
	      @click="toPay"
	      style="
	        background-color: #26c947;
	        color: white;
	        border-radius: 30upx;
	      "
	    >
	      确认
	    </button>
	  </view>
	</uni-popup>
	<lyy-pass-input ref="passInput" title="支付佣金" :money="currentMoney" @confirm="confirm" @close="close"> </lyy-pass-input>
  </view>
</template>

<script>
import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
import { formatDate } from '@/common/date';
import config from "@/config/index.config.js";
export default {
  name: 'yzb-position',
  props: {
    positions: Array,
    listType: Number,
    isAuth: Boolean,
  },
  components: {
    mEmptyData,
  },
  data() {
    moneyShow: false;
    return {
      no_order_1: this.$mAssetsPath.no_order_1,
	  payType:0,
	  currentId:'',
	  currentMoney:0
    };
  },

  methods: {
    onClick(item) {
      this.$emit('click', item);
    },
	payRadioChange(e){
			   this.payType = e.detail.value;
					console.log(e.detail.value);
				},
	bbOPay(id,money) {
		this.currentId=id;
		this.currentMoney=money;
		this.$refs.popup.open();
		// 用户点击了确认按钮，执行下一个功能的逻辑
	},
	async confirm(obj){
		const reqBb =  {bangBId:this.currentId,type:3,payType:this.payType,money:this.currentMoney,password:obj.pass}
		uni.request({
			url: `${config.baseUrl}/starCityAll/wxPay/payWxCreateBb`,
			method: "POST",
			data: reqBb,
			dataType: "json",
			header: {
				"content-type": "application/json",
				"Blade-Auth":uni.getStorageSync("token")
			},
			success: (res) => {
				if (res.statusCode == 200) {
					if(res.data.code == "0"){
						console.log('支付成功：', res);
						this.$refs["passInput"].close();
						this.$refs.popup.close();
						uni.showToast({
						  title: '恭喜您支付成功！',
						})
						this.$parent.reloadData();
					}else{
						this.$refs["passInput"].close();
						this.$refs.popup.close();
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						})
					}
				}else{
					uni.showToast({
						title: "接口请求失败!",
						icon: "none",
					})
				}
			},
			fail: (err) => {
				uni.hideLoading();
				uni.showToast({
					title: "网络异常，请稍后再试!",
					icon: "none",
				})
				reject("网络异常，请稍后再试!");
			}
		})
		  
				// this.$apis.payWxCreateBb(reqBb).then((res) => {
				// 	// 异步操作成功的处理逻辑
				// 	console.log('支付成功：', res);
				// 	this.$refs["passInput"].close();
				// 	uni.showToast({
				// 	  title: '恭喜您支付成功！',
				// 	})
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
					
				// }),error((error) => {
				// 	 this.$refs["passInput"].close();
				// 	// 异步操作失败的处理逻辑
				// 	console.error('支付失败122：', error);
				// });
			
		  },
	toPay(){
		if(this.payType==0){
			this.$refs["passInput"].open();
		}else if(this.payType==1){
			const prent = this;
			const reqBb =  {bangBId:this.currentId,type:3,payType:this.payType}
			prent.$apis.payWxCreateBb(reqBb).then((params) => {
			    // 异步操作成功的处理逻辑
			    console.log('支付成功：', params);
								
							   const res =	  uni.requestPayment({
									  provider: params.package,
									  timeStamp: params.timestamp,
									  nonceStr: params.noncestr,
									  package: params.partnerid,
									  signType: "RSA",
									  paySign: params.sign,
									  success: (res) => {
									uni.showToast({
									  title: '恭喜您支付成功！',
									})
			
									 // 在第3级页面内 navigateBack，将返回第一层页面
									 uni.navigateBack({
									 	delta: 1
									 });
								setTimeout(() => {
								    this.$mRouter.push({
								      route: this.$mRoutesConfig.index
								    });
								  }, 1000);
								  
									  },
									  		
									  fail: (err) => {
										  uni.showToast({
										    title: '支付失败',err
										  })
										  	console.log("支付err返回",err)
										//this.getSubscribe('0')
									  }
				      });
			}),error((error) => {
			    // 异步操作失败的处理逻辑
			    console.error('支付失败122：', error);
			});
		}
	},
	 serviceNocomplete(id,type) {
		  uni.showModal({
			  title: '请输入',
			  			content: '',
			  editable: true, //是否显示输入框
			  			placeholderText: '请输入企业名称', //输入框提示内容
			  			confirmText: '确认',
			  			cancelText: '取消',
			  success: (req) => {
			  	if(req.confirm){
					
					}
					}
		  })
		 
		 
	 },
	 servicecomplete(id,type) {
		 
		 const data={id:id,type:type}
		 const prend=this;
		 uni.showModal({
		   	title:"提示",
			 content:"是否确认服务完成?",
			success: (req) => {
				if(req.confirm){				prend.$apis.bbOrderConfirm(data).then((req)=>{
						console.log("确认反馈=",req)								 if(req){								 	uni.showToast({								 	  title: "操作成功",								 	  icon: 'success',								 	  position: 'bottom',								 	});
									
									// 更新 positions 数组中相应项的状态为已下架
									    const index = this.positions.findIndex(item => item.id === reqBb);
									    if (index !== -1) {
									this.positions[index].state = 2; // 或者删除该项：this.positions.splice(index, 1);
									    
									    }					
							}
						})			}
		 },
		 
		})
		 },
	 bbCick(id,type) {
		  // uni.showToast({
		  //   title: "热死",
		  //   icon: 'success',
		  //   position: 'bottom',
		  // });
		  	const prent = this;
			const reqBb = id;
			const type1 = type;
			let msg = "";
			if(type==0){
				msg="是否进行下架?"
			}else {
				msg="是否进行上架?"
			}
			uni.showModal({
			  title: '提示',
			  content: msg,
			  success:  (res) =>{
			    if (res.confirm) { 
			      // 在这里你可以处理用户点击确定后的逻辑，并传递需要的值
			      // 例如，你可以将某个变量的值作为参数传递给下一个函数或方法
			  prent.$apis.bangbRe( {id:reqBb,type:type1}).then(response => {
					   console.log("接口返回2" ,response);
							// 处理接口响应
								if(response){
									uni.showToast({
									  title: type===0?"下架成功":"上架成功",
									  icon: 'success',
									  position: 'bottom',
									});
									// 更新 positions 数组中相应项的状态为已下架
									    const index = this.positions.findIndex(item => item.id === reqBb);
									    if (index !== -1) {
											if(type==0){
												  this.positions[index].listing = '1'; // 或者删除该项：this.positions.splice(index, 1);
											}else{
												  this.positions[index].listing = '0'; // 或者删除该项：this.positions.splice(index, 1);
											}
									    
									    }
								}
			
						
				          }).catch(error => {
				            // 处理错误
							    console.log("接口返回错误的" + response);
				          });
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			      // 在这里你可以处理用户点击取消后的逻辑
			    }
			  }
			});

		
	    },
		edit(id){
			uni.navigateTo({
					url:  `/pages/bbb/bbbEdit?id=${id}`
			      });
			
		},
    formatCreateTime(time) {
      if (time == null || time === '') {
        return '未知';
      }
      let str = time.replace(/-/g, '/');
      let date = new Date(str);
      return formatDate(date, 'yyyy.MM.dd');
    },
  },
};
</script>

<style lang="scss">
.m-bbb {
  .mark {
    color: white;
    font-size: 35upx;
    line-height: 80upx;
    width: 180upx;
    text-align: center;
	 transform: translateX(-10px);
  }
  .label1 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label1.png);
  }
  .label2 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label2.png);
  }
  .label3 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label3.png);
  }
  .item {
	  position: relative;
    background-size: 200upx 90upx;
    background-repeat: no-repeat;
    background-color: $bgcolor_white;
    padding: 0upx 30upx;
  }
}

.labelBb1 {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
.title-parttime1 {
	margin-top: -40upx;
    float: right;
	 background-color: #f0f4dc;//设置按钮的背景颜色为浅黄色。
  }
  .title-parttime2 {
  	//height: 40upx;
  	//width: 20%;
    //color: #663399;//设置按钮的文字颜色为紫色。
     // border: 2upx solid #36b957;//设置按钮的边框为 2upx 的实线边框，颜色为绿色。
    //  background-color: #bfbfbf;//设置按钮的背景颜色为浅黄色。
      //font-size:  1.0rem;;
  //	font-size: 35upx; //字体大小
    //  margin-left: 15upx;//设置按钮与其左侧元素之间的左侧间距为 15upx。
    //  padding: 4upx 15upx; //设置按钮的内边距为上下各 4upx，左右各 15upx。
  	margin-top: -40upx; //设置按钮与其上方元素之间的顶部间距为 -40upx，即按钮向上偏移 40upx。
  	//border-radius: 10upx;// 设置按钮的边框圆角半径为 10upx，使按钮呈现圆角效果。
    //  line-height: 30upx;//设置按钮的行高为 30upx，使按钮内文字垂直居中。
      float: right;//设置按钮浮动在右侧。
    }
	.title-parttime3 {
		margin-left: 160rpx;
		margin-top: -40upx; //设置按钮与其上方元素之间的顶部间距为 -40upx，即按钮向上偏移 40upx。
	  }
}
.label {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
  // border-radius: 6upx; /* 添加圆角 */
  .title-parttime {
	font-size: 35upx; //字体大小
    color: #66666e;
    border: 1upx solid #36b957;
    background-color: #f5ffe6;
   // font-size: $uni-font-size-sm;
    margin-right: 15upx;
    padding: 4upx 15upx;
    border-radius: 6upx;
    line-height: 40upx;
    float: left;
	border-radius: 10upx; /* 添加圆角 */
  }
}
.text-error {
  color: #cb2e2e;
}
.space-between {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.distance {
  float: right;
  color: #666;
}
.labelBb {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
.title-parttime1 {
	color: #66666e;
	border: 1upx solid #36b957;
	background-color: #f5ffe6;
	font-size: $uni-font-size-sm;
	margin-right: 15upx;
	padding: 4upx 15upx;
	border-radius: 6upx;
	line-height: 40upx;
    float: right;
  }
}

.title {
  margin-top: 10upx;
  .title-name {
    font-weight: bold;
    font-size: $uni-font-size-lg;
  }
  .right {
    color: #cb2e2e;
    font-weight: bold;
    font-size: 32upx;
  }
}
.editBtn{
	width:45rpx;
	height:45rpx;
	position: absolute;
	right: 30rpx;
	top: 20rpx;
}
</style>
